<template>
    <el-main>
        <el-form :model="searchParam" :inline="true">
            <el-form-item>
                <el-input v-model="searchParam.categoryName" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="Search" @click="searchBtn">搜索</el-button>
                <el-button icon="Close" type="danger" @click="resetBtn">重置</el-button>
                <el-button icon="Plus" type="primary" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>

        <SysDialog :title="dialog.title" :visible="dialog.visible" :height="dialog.height" @close="onClose"
            @confirm="commit">
            <template v-slot:content>
                <el-form :model="addModel" ref="addForm" :rules="rules" size="default" label-with="100px">
                    <el-form-item label="分类名称" prop="categoryName">
                        <el-input v-model="addModel.categoryName" />
                    </el-form-item>
                    <el-form-item label="分类序号" prop="orderNum">
                        <el-input type="number" v-model="addModel.orderNum" />
                    </el-form-item>
                </el-form>
            </template>
        </SysDialog>

        <el-table :data="tableList" :height="tableHeight" border stripe>
            <el-table-column prop="categoryName" label="分类名称"></el-table-column>
            <el-table-column prop="orderNum" label="分类序号"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button type="primary" icon="Edit" size="default" @click="editBtn(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="Delete" size="default" @click="deleteBtn(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="searchParam.currentPage"
            :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchParam.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="searchParam.total" background>
        </el-pagination>
    </el-main>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { ElMessage, FormInstance } from 'element-plus';

import { addCategoryApi, deleteCategoryApi, editCaegoryApi, listApi } from '@/api/category';
import { Title } from '@/type/BaseEnum';
import { Category } from '@/api/category/CategoryModel';
import useWarnConfirm from '@/hooks/useWarnConfirm';

const { global } = useWarnConfirm();

const addForm = ref<FormInstance>();

const { dialog, parentShow, parentClose, parentConfirm } = useDialog();

const tableList = ref<any[]>([])
const tableHeight = ref(0)
const tags = ref('')

const searchParam = reactive({
    currentPage: 1,
    pageSize: 10,
    categoryName: '',
    total: 0
})

const addBtn = () => {
    tags.value = '0'
    dialog.title = Title.ADD
    dialog.height = 120
    parentShow();
}

const editBtn = (row: Category) => {
    tags.value = '1'
    dialog.title = Title.EDIT
    dialog.height = 150
    parentShow();

    nextTick(() => {
        Object.assign(addModel, row);
    })
}

const deleteBtn = async (row: Category) => {
    let confirm = await global.$warningConfirm('确定要删除该分类吗？')
    if (confirm) {
        let res = await deleteCategoryApi(row);
        if (res && res.code === 200) {
            ElMessage.success(res.msg);
            getList();
        }
    }

    // global.$warningConfirm('确定要删除该分类吗？').then((confirm: boolean) => {
    //     if (confirm) {
    //         deleteCategoryApi(row).then(res => {
    //             if (res && res.code === 200) {
    //                 ElMessage.success(res.msg);
    //                 getList();
    //             }
    //         })
    //     }
    // })
}
const onClose = () => {
    parentClose();
    addModel.categoryId = 0
    addModel.categoryName = ''
    addModel.orderNum = ''
}

const commit = () => {
    addForm.value?.validate(async (valid: boolean) => {
        if (valid) {
            let res = null;
            if (tags.value === '0') {
                res = await addCategoryApi(addModel);
            } else {
                res = await editCaegoryApi(addModel);
            }
            if (res && res.code === 200) {
                ElMessage.success(res.msg);
                parentClose();
                getList();
            }
        }
    })
}

const addModel = reactive({
    categoryId: 0,
    categoryName: '',
    orderNum: ''
})

const rules = reactive({
    categoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
    orderNum: [{ required: true, message: "请填写分类序号", trigger: "blur" }]
});

const getList = async () => {
    // let res = await listApi(searchParam)
    // if (res && res.code === 200) {
    //     tableList.value = res.data.records;
    //     searchParam.total = res.data.total;
    // }
    listApi(searchParam).then(res => {
        if (res && res.code === 200) {
            tableList.value = res.data.records;
            searchParam.total = res.data.total;
        }
    })
}

onMounted(() => {
    getList();
    tableHeight.value = window.innerHeight - 200;
})

const sizeChange = (size: number) => {
    console.log(`size`, size)
    searchParam.pageSize = size
    getList()
}

const currentChange = (page: number) => {
    console.log(`page`, page)
    searchParam.currentPage = page
    getList()
}

const searchBtn = () => {
    getList()
}

const resetBtn = () => {
    searchParam.categoryName = ''
    getList()
}

const first = () => {
    console.log('first函数被调用...')
    second();
    third();
}


const second = () => {
    console.log('second函数被调用...')
    setTimeout(() => {
        console.log('下载图片，花费两秒...')
    }, 2000)
}

const third = () => {
    console.log("third函数被调用...")
}

//first();

const secondCallback = (callback: Function) => {
    console.log('second函数被调用...')
    setTimeout(() => {
        console.log('下载图片，花费两秒...')
        callback();
    }, 2000)
}

const firstCallback = () => {
    console.log('first函数被调用...')
    secondCallback(third);
}

//firstCallback();

const secondPromise = () => {
    console.log('second函数被调用...')
    return new Promise<void>((resolve, reject) => {
        setTimeout(() => {
            console.log('下载图片，花费两秒...')
            resolve();
        }, 2000)
    })
}


const firstPromise = () => {
    console.log('first函数被调用...')
    secondPromise().then(third)
}

//firstPromise();

const firstAsync = async () => {
    console.log('first函数被调用...')
    await secondPromise();
    third();
}

firstAsync()
</script>

<style scoped></style>